<!-- node.js服务器版本 -->
<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.js"></script>
    <script type="text/javascript" src="./d3.v3.js"></script>
    <script src="./jquery-3.3.1.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 1360px;height:1000px;"></div>
    <script type="text/javascript">

        var sensors = `10019,1,0,19;10110,1,1,10;10111,1,1,11;10112,1,1,12;10113,1,1,13;10114,1,1,14;10115,1,1,15;10116,1,1,16;10117,1,1,17;10118,1,1,18;10119,1,1,19;10201,1,2,1;10202,1,2,2;10203,1,2,3;10204,1,2,4;10205,1,2,5;10206,1,2,6;10207,1,2,7;10208,1,2,8;10209,1,2,9;10210,1,2,10;10211,1,2,11;10215,1,2,15;10216,1,2,16;10217,1,2,17;10218,1,2,18;10219,1,2,19;10220,1,2,20;10221,1,2,21;10222,1,2,22;10223,1,2,23;10224,1,2,24;10301,1,3,1;10302,1,3,2;10303,1,3,3;10304,1,3,4;10305,1,3,5;10306,1,3,6;10307,1,3,7;10308,1,3,8;10309,1,3,9;10310,1,3,10;10311,1,3,11;10315,1,3,15;10316,1,3,16;10317,1,3,17;10318,1,3,18;10319,1,3,19;10320,1,3,20;10321,1,3,21;10322,1,3,22;10323,1,3,23;10324,1,3,24;10325,1,3,25;10326,1,3,26;10327,1,3,27;10401,1,4,1;10402,1,4,2;10403,1,4,3;10404,1,4,4;10405,1,4,5;10406,1,4,6;10407,1,4,7;10408,1,4,8;10409,1,4,9;10410,1,4,10;10411,1,4,11;10415,1,4,15;10416,1,4,16;10417,1,4,17;10418,1,4,18;10419,1,4,19;10420,1,4,20;10421,1,4,21;10422,1,4,22;10423,1,4,23;10424,1,4,24;10425,1,4,25;10426,1,4,26;10427,1,4,27;10501,1,5,1;10502,1,5,2;10503,1,5,3;10504,1,5,4;10505,1,5,5;10506,1,5,6;10507,1,5,7;10508,1,5,8;10509,1,5,9;10510,1,5,10;10511,1,5,11;10515,1,5,15;10516,1,5,16;10517,1,5,17;10518,1,5,18;10519,1,5,19;10520,1,5,20;10521,1,5,21;10522,1,5,22;10523,1,5,23;10524,1,5,24;10525,1,5,25;10526,1,5,26;10527,1,5,27;10601,1,6,1;10602,1,6,2;10603,1,6,3;10604,1,6,4;10605,1,6,5;10606,1,6,6;10607,1,6,7;10608,1,6,8;10609,1,6,9;10610,1,6,10;10611,1,6,11;10615,1,6,15;10616,1,6,16;10617,1,6,17;10618,1,6,18;10619,1,6,19;10620,1,6,20;10621,1,6,21;10622,1,6,22;10623,1,6,23;10624,1,6,24;10625,1,6,25;10626,1,6,26;10627,1,6,27;10701,1,7,1;10702,1,7,2;10703,1,7,3;10704,1,7,4;10705,1,7,5;10706,1,7,6;10707,1,7,7;10708,1,7,8;10709,1,7,9;10710,1,7,10;10711,1,7,11;10715,1,7,15;10716,1,7,16;10717,1,7,17;10718,1,7,18;10719,1,7,19;10720,1,7,20;10721,1,7,21;10722,1,7,22;10723,1,7,23;10724,1,7,24;10725,1,7,25;10726,1,7,26;10727,1,7,27;10801,1,8,1;10802,1,8,2;10803,1,8,3;10804,1,8,4;10805,1,8,5;10806,1,8,6;10807,1,8,7;10808,1,8,8;10809,1,8,9;10810,1,8,10;10811,1,8,11;10815,1,8,15;10816,1,8,16;10817,1,8,17;10818,1,8,18;10819,1,8,19;10820,1,8,20;10821,1,8,21;10822,1,8,22;10823,1,8,23;10824,1,8,24;10825,1,8,25;10826,1,8,26;10827,1,8,27;10901,1,9,1;10902,1,9,2;10903,1,9,3;10904,1,9,4;10905,1,9,5;10906,1,9,6;10907,1,9,7;10908,1,9,8;10909,1,9,9;10910,1,9,10;10911,1,9,11;10915,1,9,15;10916,1,9,16;10917,1,9,17;10918,1,9,18;10919,1,9,19;10920,1,9,20;10921,1,9,21;10922,1,9,22;10923,1,9,23;10924,1,9,24;10925,1,9,25;10926,1,9,26;10927,1,9,27;11006,1,10,6;11007,1,10,7;11008,1,10,8;11009,1,10,9;11010,1,10,10;11011,1,10,11;11015,1,10,15;11016,1,10,16;11017,1,10,17;11018,1,10,18;11019,1,10,19;11020,1,10,20;11021,1,10,21;11022,1,10,22;11023,1,10,23;11024,1,10,24;11025,1,10,25;11026,1,10,26;11027,1,10,27;11106,1,11,6;11107,1,11,7;11108,1,11,8;11109,1,11,9;11110,1,11,10;11111,1,11,11;11115,1,11,15;11116,1,11,16;11117,1,11,17;11118,1,11,18;11119,1,11,19;11120,1,11,20;11121,1,11,21;11122,1,11,22;11123,1,11,23;11124,1,11,24;11125,1,11,25;11126,1,11,26;11127,1,11,27;11202,1,12,2;11203,1,12,3;11204,1,12,4;11205,1,12,5;11206,1,12,6;11207,1,12,7;11208,1,12,8;11209,1,12,9;11210,1,12,10;11211,1,12,11;11212,1,12,12;11213,1,12,13;11214,1,12,14;11215,1,12,15;11216,1,12,16;11217,1,12,17;11218,1,12,18;11219,1,12,19;11220,1,12,20;11221,1,12,21;11222,1,12,22;11223,1,12,23;11224,1,12,24;11225,1,12,25;11226,1,12,26;11227,1,12,27;11228,1,12,28;11300,1,13,0;11301,1,13,1;11302,1,13,2;11303,1,13,3;11304,1,13,4;11305,1,13,5;11306,1,13,6;11307,1,13,7;11308,1,13,8;11309,1,13,9;11310,1,13,10;11311,1,13,11;11312,1,13,12;11313,1,13,13;11314,1,13,14;11315,1,13,15;11316,1,13,16;11317,1,13,17;11318,1,13,18;11319,1,13,19;11320,1,13,20;11321,1,13,21;11322,1,13,22;11323,1,13,23;11324,1,13,24;11325,1,13,25;11326,1,13,26;11327,1,13,27;11328,1,13,28;11401,1,14,1;11402,1,14,2;11403,1,14,3;11404,1,14,4;11405,1,14,5;11406,1,14,6;11407,1,14,7;11408,1,14,8;11409,1,14,9;11410,1,14,10;11411,1,14,11;11412,1,14,12;11413,1,14,13;11414,1,14,14;11415,1,14,15;11416,1,14,16;11417,1,14,17;11418,1,14,18;11419,1,14,19;11420,1,14,20;11421,1,14,21;11422,1,14,22;11423,1,14,23;11424,1,14,24;11425,1,14,25;11426,1,14,26;11427,1,14,27;11428,1,14,28;11502,1,15,2;11504,1,15,4;11505,1,15,5;11507,1,15,7;11515,1,15,15;11517,1,15,17;11519,1,15,19;11520,1,15,20;11521,1,15,21;11522,1,15,22;11523,1,15,23;11524,1,15,24;11525,1,15,25;11526,1,15,26;11527,1,15,27;11528,1,15,28;20110,2,1,10;20111,2,1,11;20202,2,2,2;20203,2,2,3;20204,2,2,4;20205,2,2,5;20206,2,2,6;20207,2,2,7;20208,2,2,8;20209,2,2,9;20210,2,2,10;20211,2,2,11;20302,2,3,2;20303,2,3,3;20304,2,3,4;20305,2,3,5;20306,2,3,6;20307,2,3,7;20308,2,3,8;20309,2,3,9;20310,2,3,10;20311,2,3,11;20402,2,4,2;20403,2,4,3;20404,2,4,4;20405,2,4,5;20406,2,4,6;20407,2,4,7;20408,2,4,8;20409,2,4,9;20410,2,4,10;20411,2,4,11;20502,2,5,2;20503,2,5,3;20504,2,5,4;20505,2,5,5;20506,2,5,6;20507,2,5,7;20508,2,5,8;20509,2,5,9;20510,2,5,10;20511,2,5,11;20602,2,6,2;20603,2,6,3;20604,2,6,4;20605,2,6,5;20606,2,6,6;20607,2,6,7;20608,2,6,8;20609,2,6,9;20610,2,6,10;20611,2,6,11;20702,2,7,2;20703,2,7,3;20704,2,7,4;20705,2,7,5;20706,2,7,6;20707,2,7,7;20708,2,7,8;20709,2,7,9;20710,2,7,10;20711,2,7,11;20802,2,8,2;20803,2,8,3;20804,2,8,4;20805,2,8,5;20806,2,8,6;20807,2,8,7;20808,2,8,8;20809,2,8,9;20902,2,9,2;20903,2,9,3;20904,2,9,4;20905,2,9,5;20906,2,9,6;20907,2,9,7;20908,2,9,8;20909,2,9,9;21001,2,10,1;21002,2,10,2;21003,2,10,3;21004,2,10,4;21005,2,10,5;21006,2,10,6;21007,2,10,7;21008,2,10,8;21009,2,10,9;21101,2,11,1;21102,2,11,2;21103,2,11,3;21104,2,11,4;21105,2,11,5;21106,2,11,6;21107,2,11,7;21108,2,11,8;21109,2,11,9;21206,2,12,6;21207,2,12,7;21208,2,12,8;21209,2,12,9;21210,2,12,10;21211,2,12,11;21300,2,13,0;21301,2,13,1;21302,2,13,2;21303,2,13,3;21304,2,13,4;21305,2,13,5;21306,2,13,6;21307,2,13,7;21308,2,13,8;21309,2,13,9;21310,2,13,10;21311,2,13,11;21400,2,14,0;21401,2,14,1;21402,2,14,2;21403,2,14,3;21404,2,14,4;21405,2,14,5;21406,2,14,6;21407,2,14,7;21408,2,14,8;21409,2,14,9;21410,2,14,10;21411,2,14,11;21500,2,15,0;21501,2,15,1;21502,2,15,2;21503,2,15,3;21504,2,15,4;21505,2,15,5;`

        var sensorFloor1 = [],
            sensorFloor2 = []

        sensors.split(';').forEach((sensor) => {
            var arr = sensor.split(",")
            if (arr[1] == 1) {
                sensorFloor1.push([parseInt(arr[3]) + 0.5, parseInt(arr[2]) + 0.5, arr[0]])
            } else {
                sensorFloor2.push([parseInt(arr[3]) + 0.5, parseInt(arr[2]) + 0.5, arr[0]])
            }
        })

        d3.csv("/day1.csv", function (d) {
            d.time = +d.time
            return d
        }, function (err, data) {
            time_sensor = timeSensorValue(data, 1)
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                baseOption: {
                    timeline: {
                        axisType: 'category',
                        orient: 'horizontal',
                        autoPlay: true,
                        inverse: false,
                        playInterval: 500,
                        // left: 10,
                        // right: 0,
                        top: 20,
                        // bottom: 20,
                        // width: 55,
                        // height: null,
                        // label: {
                        //     normal: {
                        //         textStyle: {
                        //             color: 'blue'
                        //         }
                        //     },
                        //     emphasis: {
                        //         textStyle: {
                        //             color: '#ff0'
                        //         }
                        //     },
                        //     position:'left',
                        //     interval:'10',
                        // },
                        symbol: 'none',
                        lineStyle: {
                            color: '#555'
                        },
                        checkpointStyle: {
                            color: '#bbb',
                            borderColor: '#777',
                            borderWidth: 2
                        },
                        controlStyle: {
                            showNextBtn: false,
                            showPrevBtn: false,
                            normal: {
                                color: '#666',
                                borderColor: '#666'
                            },
                            emphasis: {
                                color: '#aaa',
                                borderColor: '#aaa'
                            }
                        },
                        data: []
                    },
                    grid: [
                        { x: '10%', y: '10%', width: '50%', height: '38%' },
                        { x2: '10%', y: '10%', width: '25%', height: '38%' },

                    ],
                    xAxis: [{
                        gridIndex: 0,
                        max: 30,
                        positon: 'top',
                        interval: 1
                    }, {
                        gridIndex: 1,
                        max: 15,
                        positon: 'top',
                        interval: 1
                    },],
                    yAxis: [{
                        gridIndex: 0,
                        min: 0,
                        max: 20,
                        inverse: true,
                        interval: 1
                    }, {
                        gridIndex: 1,
                        min: 0,
                        max: 16,
                        inverse: true,
                        interval: 1
                    }],
                    tooltip: {
                        formatter: function (obj) {
                            console.log(obj)
                            return `x:${obj.value[0]} y:${obj.value[1]} count:${obj.value[2]}`
                        }
                    },
                },
                options: []
            };
            for (var n = 0; n < time_sensor[2]; n++) {
                var hour = Math.floor((time_sensor[3]+n)/60)
                var minute = (n+time_sensor[3])-(hour*60)
                console.log(hour,minute)
                option.baseOption.timeline.data.push(`${hour}:${minute}`);
                option.options.push({
                    title: {
                        show: true,
                        text: `${hour}:${minute}`,
                        right:150,
                        top:0,
                        textStyle:{
                            color:'#999',
                            fontSize:50,
                        }
                    },
                    visualMap: [{
                        show: true,
                        dimension: 2,
                        min: 0,
                        max: 50,
                        range: [1, 50],
                        inRange: {
                            symbolSize: [10, 40],
                            color: ['#ede574', '#f9d423', '#fc913a', '#ff4e50',]
                            // color:['#ff4b1f','#1fddff']
                        },
                        outOfRange: {
                            color: ['rgba(244,247,247,0.4)']
                        },
                    }],

                    series: [{
                        type: 'scatter',
                        symbol: 'rect',
                        itemStyle: {
                            normal: {
                                opacity: 0.8,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        data: time_sensor[0][n],
                    }, {
                        type: 'scatter',
                        symbol: 'rect',
                        itemStyle: {
                            normal: {
                                opacity: 0.8,
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        data: time_sensor[1][n],
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                    }]
                });
            }
            //使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })

        function timeSensorValue(data, interval = 1) {
            sensor = d3.nest().key(function (d) { return parseInt(d.time / 60 * interval) })
                .key(function (d) { return d.sid })
                .rollup(function (d) { return d.length })
                .entries(data),
                time_sensor_value1 = [],
                time_sensor_value2 = [],
                len_floor1 = sensorFloor1.length,
                len_floor2 = sensorFloor2.length,
                sensor_start = +sensor[0].key
            count = 0
            //sensorFloor1: 338
            //sensorFloor2: 133

            for (let i = 0; i < (+sensor[sensor.length - 1].key - (+sensor[0].key)); i++) {
                time_sensor_value1[i] = new Array(338)
                time_sensor_value2[i] = new Array(133)
                if (sensor[count].key == sensor_start + i) {
                    for (let j = 0; j < len_floor1; j++) {
                        time_sensor_value1[i][j] = new Array()
                        let id = sensor[count].values.findIndex(function (d) { return sensorFloor1[j][2] == d.key })
                        if (id == -1) time_sensor_value1[i][j].push(sensorFloor1[j][0], sensorFloor1[j][1], 0)
                        else time_sensor_value1[i][j].push(sensorFloor1[j][0], sensorFloor1[j][1], +sensor[count].values[id].values)
                    }
                    for (let j = 0; j < len_floor2; j++) {
                        time_sensor_value2[i][j] = new Array()
                        let id = sensor[count].values.findIndex(function (d) { return sensorFloor2[j][2] == d.key })
                        if (id == -1) time_sensor_value2[i][j].push(sensorFloor2[j][0], sensorFloor2[j][1], 0)
                        else time_sensor_value2[i][j].push(sensorFloor2[j][0], sensorFloor2[j][1], +sensor[count].values[id].values)
                    }
                    count++
                }
                else {
                    for (let j = 0; j < len_floor1; j++) {
                        time_sensor_value1[i][j] = new Array()
                        time_sensor_value1[i][j].push(sensorFloor1[j][0], sensorFloor1[j][1], 0)
                    }
                    for (let j = 0; j < len_floor2; j++) {
                        time_sensor_value2[i][j] = new Array()
                        time_sensor_value2[i][j].push(sensorFloor2[j][0], sensorFloor2[j][1], 0)
                    }
                }
            }
            return [time_sensor_value1, time_sensor_value2, sensor.length, +sensor[0].key, +sensor[sensor.length - 1].key]
        }
    </script>
</body>

</html>